<template>
  <div id="exApp">
    <div class="jx-content test-question-top-fixed">
      <div class="test-question-top">
        <span>试卷科目: 数据采集</span>
        <span class="c-btnblue">提示:选择题、判断题系统自动批阅，教师只需要批阅填空题、简答题，输入得分，点击提交即可。</span>
        <div class="test-question-top-score">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                选择题: 共10题 得分0分 正确0题 错误10题
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                判断题: 共0题 得分0分 正确0题 错误0题
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                填空题: 共10题 得分0分 正确0题 错误10题
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                简答题: 共10题 得分0分 正确0题 错误10题
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                实验题: 共0题 得分0分 正确0题 错误0题
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple all-score">
                总分数: 0分
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="btn-group">
          <div class="button-style">提 交</div>
          <div class="button-style">下一份</div>
        </div>
      </div>
    </div>
    <div class="jx-content test-question-content">
      <h2 class="tq-title">一、选择题(每题10分，共10题)</h2>
      <dl v-for="(item,index) in data" :key="item">
        <dt>
          {{ index+1 }}.{{ item.title }} (
          <span class="underline">{{ item.studentKey }}</span>
          ) ({{ item.score }}分)
          <span class="c-blue">正确答案：{{ item.rightKey }}</span>
        </dt>
        <dd v-for="(score,indexKey) in item.key" :key="score">{{ qKey[indexKey] + '. ' + score }}</dd>
      </dl>
    </div>
    <div class="experiment-report">
      <div class="report-title c-blue">Word版实验报告</div>
    </div>
  </div>
</template>
<script>
export default {
  //   ## 试卷展示的模板
  // {
  // 	name: "考试试卷",
  // 	time: 120,
  // 	score: 100,
  // 	content: [{
  // 		questionType: 1,
  // 		questionTypeName: "选择题",
  // 		questionScore: 5,
  // 		content: [{
  // 			number: 1,
  // 			questionContent: "世界上是先有鸡还是先有蛋",
  // 			answer: "",
  // 			answerList: [{
  // 				number: 1,
  // 				answerContent: "先有鸡",
  // 				rightAnswer: false
  // 			},{
  // 				number: 2,
  // 				answerContent: "先有蛋",
  // 				rightAnswer: true
  // 			},{
  // 				number: 1,
  // 				answerContent: "两者皆不对",
  // 				rightAnswer: false
  // 			}]
  // 		}]
  // 	},{
  // 		questionType: 2,
  // 		questionTypeName: "判断题",
  // 		questionScore: 2,
  // 		content: [{
  // 			number: 2,
  // 			questionContent: "一加一不等于二",
  // 			answer: false,
  // 			answerList: []
  // 		}]
  // 	},{
  // 		questionType: 3,
  // 		questionTypeName: "填空题",
  // 		questionScore: 2,
  // 		content: [{
  // 			number: 3,
  // 			questionContent: "墙面装饰分为(+)和(+),不同的墙面有着不同的装饰效果和功能",
  // 			answer: "不知道，我也不清楚",
  // 			answerList: []
  // 		}]
  // 	}]
  // }
  data() {
    return {
      qKey: ["A", "B", "C", "D"],
      data: [
        {
          //标题
          title: "以下属于大数据发展原动力的选项有：",
          //选项
          key: [
            "硬件技术的发展",
            "电子数据激增",
            "数据潜在的经济价值",
            "国内国际政策法规的推动"
          ],
          //学生答案
          studentKey: "BC",
          //正确答案
          rightKey: "ABCD",
          //分数
          score: 10
        },
        {
          title: "以下属于大数据的作用与意义的选项有：",
          key: [
            "改变经济社会管理方式",
            "促进行业融合发展",
            "推动产业转型升级",
            "助力智慧城市建设"
          ],
          studentKey: "BC",
          rightKey: "AD",
          score: 10
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {}
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#exApp {
  background: #f8f8f8;
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  .c-blue {
    color: $blue;
  }
  .c-btnblue {
    color: $btn-blue;
  }
  .c-red {
    color: #ff4240;
  }
  .test-question-top-fixed {
    position: fixed;
    width: 100%;
    top: 0;
  }
  .test-question-top {
    width: 1200px;
    padding: 0px 40px;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 16px;
    .c-btnblue {
      font-size: 14px;
      margin: 0 0 0 10px;
    }
    .test-question-top-score {
      margin-top: 20px;
      .el-col {
        font-size: 14px;
        line-height: 32px;
      }
      .all-score {
        color: $blue;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .btn-group {
      position: absolute;
      right: 0;
      top: 0px;
      .button-style {
        margin-left: 10px;
      }
    }
  }
  .test-question-content {
    width: 1200px;
    margin: 200px auto;
    color: $title-gray;
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
  }
}
</style>
